<!DOCTYPE html>
<html lang="Zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标签管理</title>
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/tag.min.css">
<style>
    .alert{
        margin: 5px 10px;
    }
    .alert strong{
        margin-right: 10px;
    }
</style>
</head>
<body>
<!-- 顶部导航 -->

<!-- 顶部导航 -->
<div class="container">
<div class="row">
    <span>TGA标签管理</span>
    
   
    
    <hr>

</div>
<div class="row">
    <form action="#"  class="form-inline">
        <div class="col-md-10">
<input type="text" id="text" class="form-control">
        </div>
        <div class="col-md-2">
            <input type="submit" class="btn btn-default" value="添加">

        </div>
    </form>
</div>

<div class="row">
<div class="col-xs-12">

</div>
</div>
</div>

<script src="./js/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script>
    $(function(){
        load();
$("form").submit(function(){
    $.ajax({
        url:"http://localhost:3000/tag",
        type:"POST",
        data:{text:$("#text").val() },
        success: function (res) {
                 if (res.status === 200){
                     load();
               console.log("添加成功");
                 }
             }
       
    })
    return false;
})


       

        $(".col-xs-12").on("click",".close",function(){
         var id = $(this).attr("data-id");
         $.ajax({
             url:"http://localhost:3000/tag",
             type:"DELETE",
             data: {_id: id },
             success: function (res) {
                 if (res.status === 200){
                    load();
               console.log("删除成功");
                 }
             }
         })
           
        })

       
        function load(){
        $.ajax({
            url:"http://localhost:3000/tag",
            type:"GET",
            success:function(res) {
                if(res.status===200){
                 const data =  res.data;
                 let html ="";
              for (let index = 0; index < data.length; index++) {
                  const element = data[index];
                  html += ` <div class="alert alert-info pull-left">
          <button type="button" data-id="${element._id}" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
          <strong>${element.text}</strong> 
      </div>`;
                }

                  $(".col-xs-12").html(html);
              }
                
                console.log(res);
            },
            error:function(err) {
      console.log(err);
            }
        })
        }
    })

</script>
</body>
</html>